<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
</head>
<script language="javascript">
// function bbimg(o){
// var zoom=parseInt(o.style.zoom, 10)||100;
// zoom+=event.wheelDelta/12;
// if (zoom>0) o.style.zoom=zoom+'%';
// return false;
// }
drag = 0;
move = 0;
var ie = document.all;
var nn6 = document.getElementById && !document.all;
var isdrag = false;
var y,x;
var oDragObj;
var pic_width,pic_height,pic_zoom;
var divleft,divtop;
 
function moveMouse(e) {
    if (isdrag) {
        oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
        oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
        return false;
    }
}
 
function initDrag(e) {
    var oDragHandle = nn6 ? e.target : event.srcElement;
    var topElement = "HTML";
    while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
        oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
    }
    if (oDragHandle.className == "dragAble") {
        isdrag = true;
        oDragObj = oDragHandle;
        nTY = parseInt(oDragObj.style.top + 0);
        y = nn6 ? e.clientY : event.clientY;
        nTX = parseInt(oDragObj.style.left + 0);
        x = nn6 ? e.clientX : event.clientX;
        document.onmousemove = moveMouse;
        return false;
    }
}
$(document).ready(function() {
     if (window.addEventListener){
        window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件，因为火狐没有wheel事件
    }
    });
     
function wheel(event) {
        if (!event) /**//* For IE. */
        {
            event = window.event;
        }
        else if (event.detail)
        {
            var height1 = $("#images1").attr("height");
             
            if (!height1) {
                height1 = height1.substring(0, height1.length - 2);
                 
            }
            var width1 = $("#images1").attr("width");
             
            if (!width1) {
                width1 = width1.substring(0, width1.length - 2);
             
            }
            if (event.detail < 0) {
                var temp1 = parseInt(height1) * 1.2;
                var temp2 = parseInt(width1) * 1.2;
                 
 
            } else {
                var temp1 = parseInt(height1) / 1.2;
                var temp2 = parseInt(width1) / 1.2;
            }
             
            $("#images1").attr("height", temp1 + "px");
             
            $("#images1").attr("width", temp2 + "px");
        }
    }
/*非Firefox的主流浏览器*/
function bbimg(o) {
      var zoom = parseInt(o.style.zoom, 10) || 100;
      zoom += event.wheelDelta / 12;
      if (zoom > 0) o.style.zoom = zoom + '%';
      return false;
    }   
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
function realsize() {
    $("#images1").attr("height", "40px");
    $("#images1").attr("width", "140px;");
    $("#images1").css("zoom", "100%");
    $("#block1").css("left", "0px");
    $("#block1").css("top", "0px");
 
}
</script>
</head>
<style>
    html,body{
        height: 100%;
        width: 100%;
    }
</style>
<body>
<!--<p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p>
<p><img border="0" src="http://ifile.2dfire.com/00173140/StoreInformation/7acff94c267f4c00af3936c4a3b124f3.png" onmousewheel="return bbimg(this)"></p>-->
 <div id='block1' style='height: 0; left: 0px; position: absolute; top: 0px; width: 0;' class="dragAble">
          <img src="http://ifile.2dfire.com/00173140/StoreInformation/7acff94c267f4c00af3936c4a3b124f3.png" id="images1"
                onmousewheel="return bbimg(this)"     ondblclick="realsize();"
                style="top:0px;left:0px;position:relative;"
                width="140px"
                height="40px">
       </div>
</body>
</html>